<template>
  <div class="login h-full flex justify-center items-center">
    <div class="w-[520px]">
      <h2 class="text-[#fff] pb-[40px] text-center text-[26px]">后台管理</h2>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        class="demo-ruleForm"
      >
        <el-form-item prop="username">
          <el-input
            :prefix-icon="UserFilled"
            size="large"
            v-model="ruleForm.username"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            :prefix-icon="Lock"
            size="large"
            v-model="ruleForm.password"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            class="w-full"
            type="primary"
            @click="submitForm(ruleFormRef)"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>

import { reactive, ref } from "vue";
import { UserFilled, Lock } from "@element-plus/icons-vue";
import { login } from "@/api/api.js";
import { useRouter } from 'vue-router'
const router=useRouter()
const ruleFormRef = ref();

const ruleForm = reactive({
  username: "",
  password: "",
  code: ''
});

const rules = reactive({
  username: [
    { required: true, message: "请输入名称", trigger: "blur" },
    { min: 1, max: 10, message: "Length should be 3 to 5", trigger: "blur" },
  ],
  password: [
    { required: true, message: "密码不能为空", trigger: "blur" },
    { min: 1, max: 10, message: "Length should be 3 to 5", trigger: "blur" },
  ],
});

const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      login(ruleForm).then(res=>{
        if(res.status===200){
          localStorage.setItem('token',res.data.data.token)
            router.push({path:'/'})
          
        }
      })
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
</script>

<style lang="scss" scoped>
.login {
  background: rgb(45, 58, 75);
}
:deep(.el-input--large .el-input__wrapper) {
  background: rgb(35, 45, 58);
  box-shadow: 0 0 0 0.1px var(--el-input-border-color, var(--el-border-color))
    // inset;
}
</style>
